<template>
    <div>
        <h2>昨日早晚高峰</h2>
       <div class="menter"><img src="../../../../public/交通概况/icon-sun_03.png" alt="">
        <div class="menter1">
        <span>早高峰小时</span>
        <p>7:55-8:55</p>
        </div>
        <div class="menter2">
        <span>拥堵指数</span>
        <p>1.76</p>
        </div>
       </div>

       <!-- 晚高峰 -->
       <div class="hanten"><img src="../../../../public/交通概况/icon--moon_03.png" alt="">
       <div class="hanten1">
        <span>晚高峰小时</span>
        <p>18:05-20:15</p>
        </div>
        <div class="hanten2">
        <span>拥堵指数</span>
        <p>1.92</p>
        </div>
       </div>
    </div>
</template>

<script>
export default {
 
};
</script>

<style lang="less" scoped>
.menter{
    display: flex;
    height: 70px;
    margin-top: 50px;
    justify-content: space-between;
    border-bottom: 2px solid gray ;
}
img{
    width: 50px;
    height: 50px;
}
.menter1>p{
    font-size: 20px;
    font-weight: bold;
}
.menter2>p{
    font-size: 20px;
    font-weight: bold;
}
//晚高峰
.hanten{
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}
.hanten1>p{
    font-size: 20px;
    font-weight: bold;
}
.hanten2>p{
    font-size: 20px;
    font-weight: bold;
}
</style>